<template>
	<view class="content">
		<view class="nav">
			<view class="navs">首页</view>
		</view>
		<view class="bg">
			<view class="pro-top">
				<view class="name">徐胖胖</view>
				<view class="buy">未开通买家保障</view>
				<view class="deal">
					<view class="zero"  v-for="(item,index) in proList" :key="index" @click="getUrl(item.url)">
						{{item.txt}}
						<view>
							{{item.title}}
							<text>{{item.text}}</text>
						</view>
				    </view>
				</view>
			</view>
		</view>
		<view class="list-two">
			<view class="use">
				<view class="line"></view>
				应用列表
			</view>
			<view class="store">
				<view class="photo" v-for="(item,index) in storeList" :key="index"  @click="getUrl(item.url)">
					<view class="imgs"><image :src="item.img"></image></view>
					<view class="stores">{{item.text}}</view>
				</view>
			</view>
		</view>
		<view class="list-three list-two">
			<view class="use">
				<view class="line"></view>
				常用功能
			</view>
			<view class="store three-store">
				<view class="photo" v-for="(item,index) in funList" :key="index"  @click="getUrl(item.url)">
					<view class="imgs"><image :src="item.img"></image></view>
					<view class="stores">{{item.text}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				proList:[
					{txt: 0,title: "交易额",text: "(昨日0)",url: 'jiaoyie'},
					{txt: 0,title: "客户咨询",text: "(昨日0)",url: 'consult'},
					{txt: 0,title: "客户浏览",text: "(昨日0)",url: 'browse'}
				],
				storeList:[
					{img: '/static/img/pro-list-one.png',text: '店铺管理',url:'storeguanli/storeguanli'},
					{img: '/static/img/pro-list-two.png',text: '优惠券管理',url:'youhuiquan/youhuiquan'},
					{img: '/static/img/pro-list-three.png',text: '订单管理',url:'orderguanli/orderguanli'},
					{img: '/static/img/pro-list-four.png',text: '商品违规',url:'browse'},
					{img: '/static/img/pro-list-five.png',text: '求购大厅',url:'buydating/buydating'},
					{img: '/static/img/pro-list-six.png',text: '供应订单',url:'browse'},
					{img: '/static/img/pro-list-seven.png',text: '商品管理',url:'browse'},
					{},
				],
				funList:[
					{img: '/static/img/fun-one.png',text: '等级勋章',url:'dengjimedal'},
					{img: '/static/img/fun-two.png',text: '保证金',url:'browse'},
					{img: '/static/img/fun-three.png',text: '账户中心',url:'zhanghucenter'},
					{img: '/static/img/fun-four.png',text: '评价中心',url:'browse'},
					{img: '/static/img/fun-five.png',text: '资质中心',url:'zizhicenter/zizhicenter'},
				]
			}		
		},
		methods: {
			getUrl(url){
				console.log(url);
				uni.navigateTo({
					url:url
				})
			}
			
		},
		
		
	}
</script>

<style lang="scss">
$bgColor: #F6F6F6;
.content{
	background-color: $bgColor;
	height: 1600upx;
	.nav,.bg,.list-two,.list-three{
		background-color: $uni-bg-color;
	}
	.nav{
		padding-top: 70upx;
		.navs{
			text-align: center;
			font-size:36upx;
			font-weight:500;
			color:rgba(51,51,51,1);
		}
	}
	.bg{	
		padding:20upx 0;
		.pro-top{
			background-image: url("http://q79q98ocd.bkt.clouddn.com/products-banner.png");
			width: 92%;
			margin: 0 auto;
			height: 246upx;
			border-radius: 15upx;		
			.name,.buy{
				color: $uni-text-color-inverse;
				text-align: center;
			}
			.name{
				font-size: 32upx;
				padding-top: 30upx;
			}
			.buy{
				font-size: 18upx;
				width:140upx;
				height:29upx;
				background:rgba(44,154,84,1);
				border-radius:4upx;
				margin: 15upx auto 0;
				line-height: 29upx;
				color:rgba(255,255,255,0.8);
			}
			.deal{
				padding-top: 40upx;
				font-size: 26upx;
				color: #fff;
				display: flex;
				.zero{
					text-align: center;
					justify-content: space-around;
					width: 33.3%;
					line-height: 40upx;
					text{
						color: #BE7541;
					}
				}
			}
		}
	}
	.list-two,.list-three{
		margin-top: 10upx;
		.use{
			padding: 35upx 30upx;
			font-size:32upx;
			font-weight:500;
			color:rgba(51,51,51,1);
			.line{
				width:10upx;
				height:40upx;
				background:rgba(85,196,125,1);
				border-radius:5upx;
				margin-right: 16upx;
				float: left;
			}
		}
		.store{	
			display: flex;
			justify-content:space-around;
			flex-wrap: wrap;
			width: 100%;
			.photo{
				padding-bottom: 35upx;
				width: 25%;	
				text-align: center;
				image{
					width: 50upx;
					height: 46upx;
				}
				.stores{
					font-size:26upx;
					font-weight:400;
					color:rgba(0,0,0,1);
					line-height: 50upx;
				}
			}
		}
	}
	.list-three{
		height: 250upx;
		.three-store{
			.photo{
				width: 20%;
				image{
					width: 42upx;
					height: 45upx;
				}
			}
		}
	}

}
</style>
